<template>
    <user-behavior-default v-if="isDataDefault" :introduce-url="introduce_url" />
    <div v-else class="user_behavior_list_container">
        <ZWSearch
            row-num="3"
            :option="searchOption"
            @search="search"
            @reset="reset"
            @input="inputSearch"
            @expand="expandSearch" />
        <ZWTable
            ref="orderTableRef"
            class="table-box"
            :option="tableOption"
            :row-key="getRowKey"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            @select="onSelect"
            @selection-change="onSelectionChange"
            @select-all="onSelectAll"
            @dataChange="tableDataChange">
            <template #headerOperateLeft>
                <div style="display: flex; align-items: center">
                    <div style="font-size: 13px; line-height: 1; margin-right: 10px">
                        最近同步时间：{{ updateTime }}
                    </div>
                    <div style="display: flex; align-items: center">
                        <el-dropdown style="margin-left: 10px">
                            <span
                                style="
                                    color: #ff6b00;
                                    font-size: 12px;
                                    cursor: pointer;
                                    line-height: 1;
                                    padding-right: 6px;
                                ">
                                同步店铺用户行为<el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="synchronousData">
                                        直接同步&nbsp;
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            :content="synchronousTips"
                                            placement="top">
                                            <el-image
                                                src="/static/question.png"
                                                style="width: 16px; height: 16px"></el-image>
                                            <!-- <el-icon color="#ccc"><QuestionFilled /></el-icon> -->
                                        </el-tooltip>
                                    </el-dropdown-item>
                                    <el-dropdown-item @click="synchronousProData">
                                        高级同步&nbsp;
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            :content="synchronousProTips"
                                            placement="top">
                                            <el-image
                                                src="/static/question.png"
                                                style="width: 16px; height: 16px"></el-image>
                                            <!-- <el-icon color="#ccc"><QuestionFilled /></el-icon> -->
                                        </el-tooltip>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-tooltip
                            class="box-item"
                            effect="dark"
                            :content="synchronousUserTips"
                            placement="right-start">
                            <el-image src="/static/question.png" style="width: 16px; height: 16px"></el-image>
                            <!-- <el-icon color="#ccc"><QuestionFilled /></el-icon> -->
                        </el-tooltip>
                    </div>
                    <div
                        v-if="isShowRefresh"
                        style="font-size: 13px; line-height: 1; margin-left: 10px; cursor: pointer; color: #ff6b00"
                        @click="reset">
                        刷新
                    </div>
                </div>
            </template>
            <template #headerOperate>
                <el-dropdown style="margin-left: 10px">
                    <el-button type="primary">
                        批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :disabled="!checkList.length" @click="exportSome">
                                批量导出
                            </el-dropdown-item>
                            <el-dropdown-item @click="exportAll">导出所有</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </ZWTable>
    </div>

    <!-- 查看 地址 弹框 -->
    <address-popover
        v-model="isShowPopover"
        :popover-address="popoverAddress"
        :popover-top="popoverTop"
        :popover-left="popoverLeft" />

    <Dialog :app-dialog="appDialogSettingPro">
        <div class="title">
            <span class="before">自动同步scrm客户</span>
            <el-switch v-model="settingProForm.auto_sync" class="ml-2" :active-value="1" :inactive-value="2" />
            <span class="after">
                开启后，订单收货人将根据手机号自动分配scrm客户，如果匹配不上，将自动创建新的scrm客户，并按规则分配员工跟进。
            </span>
        </div>
        <el-form ref="settingProFormRef" :model="settingProForm" :rules="settingProFormRules" label-width="auto">
            <el-form-item label="客户公海" prop="cust_seas_id">
                <el-select v-model="settingProForm.cust_seas_id" placeholder="请选择客户公海">
                    <el-option v-for="item in seas_ids" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="客户来源" prop="cust_source_id">
                <el-select v-model="settingProForm.cust_source_id" placeholder="请选择客户来源">
                    <el-option v-for="item in source_ids" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="客户阶段" prop="cust_stage_id">
                <el-select v-model="settingProForm.cust_stage_id" placeholder="请选择客户阶段">
                    <el-option v-for="item in stage_ids" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="分配员工" prop="dist_work_user_list">
                <select-depart v-model="settingProForm.dist_work_user_list" multiple />
            </el-form-item>
            <el-form-item label="分配方式">
                <el-radio-group v-model="settingProForm.dist_type">
                    <el-radio :label="1">随机分配</el-radio>
                    <el-radio :label="2">平均分配</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </Dialog>

    <!-- 高级同步 -->
    <Dialog :app-dialog="appDialogSynchronousPro">
        <el-form
            ref="synchronousProFormRef"
            :model="synchronousProForm"
            :rules="synchronousProFormRules"
            label-width="auto">
            <el-form-item label="归属店铺" prop="external_shop_id">
                <select-store v-model="synchronousProForm.external_shop_id" :tips="true" @change="changeStore" />
            </el-form-item>
            <el-form-item label="创建时间" prop="behavior_time">
                <el-date-picker
                    v-model="synchronousProForm.behavior_time"
                    :editable="false"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="daterange"
                    range-separator="—"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    prefix-icon="Calendar"
                    size="small"
                    :disabled-date="disabledDate"
                    @calendar-change="handleChange"
                    @focus="handleFocus" />
                <div style="font-size: 12px">最多选择{{ impose }}天的数据</div>
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup lang="tsx">
import { reactive, ref, onMounted, computed, nextTick } from 'vue';
import { ElMessage, ElButton, ElPopper } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import Dialog from '@/components/Dialog.vue';
import { getCustomerOpenseaSelect } from '@/api/customer/manage/list';
import { sourceList } from '@/view/customer/manage/configure/api';
import { stageList } from '@/api/customerCenter/labellagroup';
import { getStoreSourceList, getDictEnum, queryProductList, queryPageList } from '@/api/ecommerce/storeManage';
import { getOrderList, synchronous } from '@/api/ecommerce/tradingManage';
import {
    getUserList,
    settingProfessional,
    getBehaviorList,
    syncUserBehavior,
    exportUserBehaviorData,
    getBehaviorSync
} from '@/api/ecommerce/userManage';
import ZWSearch from '@/components/zw/search-form/SearchForm';
import ZWTable from '@/components/zw/table/Table';
import selectDepart from '@/components/customerCenter/selectDepart.vue';

import addressPopover from '../../components/addressPopover.vue';
import selectStore from '../../components/selectStore.vue';
import userBehaviorDefault from '../../components/userBehaviorDefault.vue';
import tableHeaderTooltip from '../../components/tableHeaderTooltip.vue';

import lodash from 'lodash';
import { deepCopy } from '@/utils/helper';
import router from '@/router';
import { div } from '@/utils/math';
import { downloadFile } from '@/utils/utils';

const orderTableRef = ref();
const tips = ref<string>('删除后，该店铺数据将不能同步，店铺关联的数据也会清除，您确定要删除该店铺吗？');
const synchronousUserTips = ref<string>('同一openid在同一时间的用户行为相同时，认为是同一条记录，将不再同步');
const synchronousTips = ref<string>('同步客易达电商、有赞店铺最近180天的数据');
const synchronousProTips = ref<string>('同步选择指定店铺指定时间段的数据');
const settingProFormRef = ref<FormInstance>();
const synchronousProFormRef = ref<FormInstance>();

const pickDay = ref();
const impose = ref(180);

const updateTime = ref<string>('');
const isDataDefault = ref<boolean>(false);
const introduce_url = ref<string>('');

const checkList = ref<any>([]);
let paramsSearch = reactive<any>(null);

const seas_ids = reactive<any>([]);
const source_ids = reactive<any>([]);
const stage_ids = reactive<any>([]);

const isShowPopover = ref<boolean>(false);
const popoverAddress = reactive<any>([]);
const popoverTop = ref<number>(0);
const popoverLeft = ref<number>(0);
const isShowRefresh = ref<boolean>(false);

const calcDefaultDate = () => {
    const nowDate = new Date().getTime();
    const lastDate = nowDate - 1000 * 60 * 60 * 24 * 179;
    const now_year = new Date().getFullYear();
    let now_month = new Date().getMonth() + 1;
    let now_day = new Date().getDate();

    const last_year = new Date(lastDate).getFullYear();
    let last_month = new Date(lastDate).getMonth() + 1;
    let last_day = new Date(lastDate).getDate();

    now_month = now_month > 9 ? now_month : `0${now_month}`;
    now_day = now_day > 9 ? now_day : `0${now_day}`;

    last_month = last_month > 9 ? last_month : `0${last_month}`;
    last_day = last_day > 9 ? last_day : `0${last_day}`;

    return [`${last_year}-${last_month}-${last_day} 00:00:00`, `${now_year}-${now_month}-${now_day} 23:59:59`];
};

const defaultDate = calcDefaultDate();
const defaultParams = reactive<any>({
    behavior_time: defaultDate
});

const user_id_tips = ref<any[]>([
    {
        id: 1,
        text: '关联用户ID：通过openid、unionid、手机号等可以识别用户ID'
    }
]);
const cust_tips = ref<any[]>([
    {
        id: 1,
        text: '绑定客易达客户信息'
    },
    {
        id: 2,
        text: '淘宝订单：通过订单收件人手机号码匹配客易达客户'
    },
    {
        id: 3,
        text: '客易达订单、自营店铺订单：通过订单购买账号授权的手机号来匹配客易达客户'
    }
]);

type stateType = {
    searchParams: any;
    deleteId: number | string;
};
const state = reactive<stateType>({
    searchParams: lodash.cloneDeep(defaultParams),
    deleteId: ''
});

type settingProFormType = {
    auto_sync?: string | number;
    cust_seas_id?: string | number;
    cust_source_id?: string | number;
    cust_stage_id?: string | number;
    dist_work_user_list: any[];
    dist_type?: string | number;
    cust_tags?: [];
};
const settingProForm = reactive<settingProFormType>({
    auto_sync: 1,
    cust_seas_id: '',
    cust_source_id: '',
    cust_stage_id: '',
    dist_work_user_list: [],
    dist_type: 1,
    cust_tags: []
});
const settingProFormRules = reactive<FormRules>({
    cust_seas_id: [{ required: true, message: '请选择客户公海', trigger: 'change' }],
    cust_source_id: [{ required: true, message: '请选择客户来源', trigger: 'change' }],
    cust_stage_id: [{ required: true, message: '请选择客户阶段', trigger: 'change' }],
    dist_work_user_list: [{ required: true, message: '请选择分配员工', trigger: 'change' }],
    cust_tags: [{ required: true, message: '请选择客户标签', trigger: 'change' }]
});

// 高级同步
type synchronousProFormType = {
    external_shop_id?: string | number;
    behavior_time: string[];
};
const synchronousProForm = reactive<synchronousProFormType>({
    external_shop_id: '',
    behavior_time: []
});
const synchronousProFormRules = reactive<FormRules>({
    external_shop_id: [{ required: true, message: '请选择归属店铺', trigger: 'change' }],
    behavior_time: [{ required: true, message: '请选择下单时间', trigger: 'change' }]
});

const searchOption = computed(() => {
    return [
        {
            label: '用户信息',
            name: 'external_user_id',
            value: '',
            type: 'input',
            placeholder: '请输入用户ID搜索'
        },
        {
            label: '绑定客户',
            name: 'cust_keyword',
            value: '',
            type: 'input',
            placeholder: '请输入客户姓名｜手机号搜索'
        },
        {
            label: '用户行为',
            name: 'behavior_type',
            value: '',
            type: 'select',
            placeholder: '请选择用户行为',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    const params = { dict_id: 3 };
                    getDictEnum(params).then((res: any) => {
                        const targetArr: any = [];
                        res.forEach((item: any) => {
                            targetArr.push(item);
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '店铺类型',
            name: 'retail_shop_type',
            value: '',
            type: 'select',
            placeholder: '请选择店铺类型',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    const params = { dict_id: 1 };
                    getDictEnum(params).then((res: any) => {
                        const targetArr: any = [];
                        res.forEach((item: any) => {
                            targetArr.push(item);
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '归属店铺',
            // name: "external_shop_id",
            name: 'retail_shop_id',
            value: '',
            type: 'select',
            placeholder: '全部',
            popperClass: 'zw-hide_select_option',
            isStoreSelect: true,
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '浏览页面',
            // name: 'external_page_id',
            name: 'external_page_id_list',
            value: [],
            type: 'selectV2',
            multiple: true,
            filterable: true,
            remote: true,
            placeholder: '请输入浏览页面搜索',
            fetchOptionApi: (page_name: string) => {
                return new Promise(resolve => {
                    const params = { page_name };
                    queryPageList(params).then((res: any) => {
                        resolve(res);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.page_name,
                value: v.external_page_id_list
            })
        },
        {
            label: '关联商品',
            // name: 'external_product_id',
            name: 'external_product_id_list',
            value: [],
            type: 'selectV2',
            multiple: true,
            filterable: true,
            remote: true,
            placeholder: '请输入商品名称搜索',
            fetchOptionApi: (product_name: string) => {
                return new Promise(resolve => {
                    const params = { product_name };
                    queryProductList(params).then((res: any) => {
                        resolve(res);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.product_name,
                value: v.external_product_id_list
            })
        },
        {
            label: '浏览时长',
            name: 'visit_duration',
            value: [],
            type: 'section'
        },
        {
            label: '用户行为时间',
            name: 'behavior_time',
            value: defaultDate,
            default: defaultDate,
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            disabledDate: (date: Date) => {
                return new Date(date).getTime() > new Date().getTime();
            }
        }
    ];
});

const tableOption = [
    {
        type: 'selection',
        width: 65,
        fixed: 'left',
        reserveSelection: true
    },
    {
        prop: 'wx_openid',
        label: 'openid',
        width: 220,
        render({ row }: any) {
            return row?.wx_openid ? row?.wx_openid : '--';
        }
    },
    {
        prop: 'wx_unionid',
        label: 'unionid',
        width: 220,
        render({ row }: any) {
            return row?.wx_unionid ? row?.wx_unionid : '--';
        }
    },
    {
        prop: 'shop_type_name',
        label: '店铺类型',
        width: 180,
        render({ row }: any) {
            return row?.shop_type_name ? row?.shop_type_name : '--';
        }
    },
    {
        prop: 'behaviour_type_name',
        label: '用户行为',
        width: 180,
        render({ row }: any) {
            return row?.behaviour_type_name ? row?.behaviour_type_name : '--';
        }
    },
    {
        prop: 'visit_source_name',
        label: '访问来源',
        width: 160,
        render({ row }: any) {
            return row?.visit_source_name ? row?.visit_source_name : '--';
        }
    },
    {
        prop: 'retail_page',
        label: '浏览页面',
        width: 160,
        render({ row }: any) {
            return row?.retail_page?.page_name ? row?.retail_page?.page_name : '--';
        }
    },
    {
        prop: 'visit_duration',
        label: '浏览时长',
        width: 160,
        render({ row }: any) {
            return `${row?.visit_duration}s`;
        }
    },
    {
        prop: 'user',
        label: '关联用户ID',
        width: 160,
        render({ row }: any) {
            return row?.retail_user_id ? row?.retail_user_id : '--';
        },
        renderHeader({ row, index }: any) {
            return <tableHeaderTooltip title="关联用户ID" content={user_id_tips.value} />;
        }
    },
    {
        prop: 'cust',
        label: '绑定客户',
        width: 180,
        render({ row }: any) {
            if (row?.cust_name) {
                const { cust_name, cust_mobile, cust_type, cust_id } = row;
                return (
                    <div
                        class="bindCust"
                        onClick={() => {
                            const url = `/customer/manage/list/detail?id=${cust_id}&type=${cust_type}`;
                            window.open(url, '_blank');
                        }}>
                        <span>{`${cust_name ?? ''}${cust_mobile ? '(' + cust_mobile + ')' : ''}`}</span>
                    </div>
                );
            } else {
                return '--';
            }
        },
        renderHeader({ row, index }: any) {
            return <tableHeaderTooltip title="绑定客户" content={cust_tips.value} />;
        }
    },
    {
        prop: 'external_order_id',
        label: '关联订单',
        width: 160,
        render({ row }: any) {
            return row?.external_order_id ? row?.external_order_id : '--';
        }
    },
    {
        prop: 'external_product_id',
        label: '关联商品',
        width: 160,
        render({ row }: any) {
            return row?.product_name
                ? row?.product_name + (row?.order_product_num > 1 ? '等' + row?.order_product_num + '个商品' : '')
                : '--';
        }
    },
    {
        prop: 'shop',
        label: '归属店铺',
        width: 180,
        render({ row }: any) {
            return row?.shop_name ? row?.shop_name : '--';
        }
    },
    {
        prop: 'store',
        label: '关联门店',
        width: 180,
        render({ row }: any) {
            return row?.store_name ? row?.store_name : '--';
        }
    },
    {
        prop: 'behaviour_time',
        label: '用户行为时间',
        minWidth: 200,
        render({ row }: any) {
            return row?.behaviour_time ? row?.behaviour_time : '--';
        }
    }
];

const getRowKey = (row: any) => {
    return row.id;
};

const expandSearch = () => {
    nextTick(() => {
        orderTableRef.value.getTableH();
    });
};

const disabledDate = (time: number) => {
    if (!pickDay.value) {
        return false;
    }
    if (impose.value) {
        const con1 = new Date(pickDay.value).getTime() - impose.value * 24 * 60 * 60 * 1000;
        const con2 = new Date(pickDay.value).getTime() + impose.value * 24 * 60 * 60 * 1000;
        return time < con1 || time > con2;
    }
    return false;
};
const handleChange = (val: Date[]) => {
    if (impose.value) {
        const [pointDay] = val;
        pickDay.value = pointDay;
    }
};
const handleFocus = () => {
    pickDay.value = null;
};

const inputSearch = (val: any) => {
    paramsSearch = val;
};

const search = (data: any): void => {
    orderTableRef.value.clearSelection();
    const { behavior_time: behavior_time = [] } = data;
    if (behavior_time?.length) {
        const diff = new Date(behavior_time[1]).getTime() - new Date(behavior_time[0]).getTime();
        if (diff / (1000 * 60 * 60 * 24) > 180) {
            ElMessage.warning('用户行为时间选择范围在180天内');
        } else {
            state.searchParams = data;
        }
    } else {
        ElMessage.warning('请选择用户行为时间');
    }
};

const reset = (): void => {
    orderTableRef.value.clearSelection();
    state.searchParams = lodash.cloneDeep(defaultParams);
};
const fetchApi = (): any => {
    return new Promise((resolve: any): any => {
        const page_size: string | number = 15;
        const params = {};
        resolve([params, getBehaviorList]);
    });
};

const synchronousData = async () => {
    const params = { sync_type: 1 };
    if (await syncUserBehavior(params)) {
        isShowRefresh.value = true;
        ElMessage.success('同步成功');
        reset();
    }
};
const synchronousProData = () => {
    appDialogSynchronousPro.visible = true;
};

const cancelHandel = (): void => {
    appDialogSettingPro.visible = false;
    settingProForm.auto_sync = 1;
    settingProForm.cust_seas_id = '';
    settingProForm.cust_source_id = '';
    settingProForm.cust_stage_id = '';
    settingProForm.dist_work_user_list = [];
    settingProForm.dist_type = 1;
    settingProForm.cust_tags = [];
};
const submitHandel = async () => {
    if (!settingProFormRef.value) return;
    await settingProFormRef.value.validate((valid: any): void => {
        if (valid) {
            settingProfessional(settingProForm).then(() => {
                ElMessage.success('设置成功');
                cancelHandel();
                reset();
            });
        }
    });
};
const appDialogSettingPro = reactive<any>({
    visible: false,
    title: '高级设置',
    width: '660px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});

const cancelHandelSynchronousPro = (): void => {
    appDialogSynchronousPro.visible = false;
};
const submitHandelSynchronousPro = async () => {
    if (!synchronousProFormRef.value) return;
    await synchronousProFormRef.value.validate(async (valid: any): Promise<void> => {
        if (valid) {
            let params = lodash.cloneDeep(synchronousProForm);
            params = Object.assign({}, params, { sync_type: 2 });
            if (await syncUserBehavior(params)) {
                isShowRefresh.value = true;
                ElMessage.success('同步成功');
                appDialogSynchronousPro.visible = false;
                reset();
            }
        }
    });
};
const appDialogSynchronousPro = reactive<any>({
    visible: false,
    title: '高级同步',
    width: '600px',
    cancel: cancelHandelSynchronousPro,
    submit: submitHandelSynchronousPro,
    cancelText: '取消',
    submitText: '确定'
});

const changeStore = (value: any) => {
    if (value?.length && value[0].source == 2) {
        impose.value = 90;
    }
    synchronousProFormRef.value.validateField('external_shop_id');
};

// 选中表格 checkbox
const onSelect = (selection: any, row: any) => {
    if (selection.constructor === Array) checkList.value = selection.map((v: any) => v.id);
};
// 选择项变更
const onSelectionChange = (selection: any) => {};
// 全选
const onSelectAll = (selection: any) => {
    checkList.value = selection.map((v: any) => v.id);
};
const tableDataChange = (data: any): void => {
    updateTime.value = data.last_sync_time;
};

const getSeaList = () => {
    seas_ids.splice(0);
    getCustomerOpenseaSelect({ type: 1 }).then((res: any) => {
        seas_ids.push(...res);
    });
};
const getSourceList = () => {
    source_ids.splice(0);
    sourceList({ page: 1, page_size: 99 }).then((res: any) => {
        source_ids.push(...res.data);
    });
};
const getStageList = () => {
    stage_ids.splice(0);
    stageList({ page: 1, page_size: 99 }).then((res: any) => {
        stage_ids.push(...res);
    });
};

const exportSome = async (): Promise<void> => {
    if (checkList.value.length) {
        const extra = { export_type: 1, behavior_ids: checkList.value };
        const params = Object.assign({}, paramsSearch, extra);
        const { url: href = '' } = await exportUserBehaviorData(params);
        if (href) {
            downloadFile(href);
            orderTableRef.value.clearSelection();
            ElMessage.success('导出成功');
        }
    }
};
const exportAll = async (): Promise<void> => {
    const extra = { export_type: 2 };
    const params = Object.assign({}, paramsSearch, extra);
    const { url: href = '' } = await exportUserBehaviorData(params);
    if (href) {
        downloadFile(href);
        ElMessage.success('导出成功');
    }
};

const checkAddress = (row: any, $event: any): void => {
    const { area_json } = row;
    const { x, y } = $event;
    isShowPopover.value = true;
    popoverTop.value = y;
    popoverLeft.value = x;
    popoverAddress.splice(0);
    popoverAddress.push(...area_json);
};

const getBehaviorSyncData = async () => {
    const res = await getBehaviorSync({});
    if (res?.has_online_retail == 1 && res?.is_setting == 1) {
        // 是否开通电商：0未开通，1开通     发者配置是否开启：0未开启，1已开启
        isDataDefault.value = false;
    } else {
        introduce_url.value = res?.introduce_url || '';
        isDataDefault.value = true;
    }
};

onMounted(() => {
    getBehaviorSyncData();
    getSeaList();
    getSourceList();
    getStageList();
});
</script>

<style lang="scss" scoped>
.user_behavior_list_container {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.title {
    display: flex;
    padding: 6px 0 16px;

    .before {
        white-space: nowrap;
        padding-right: 6px;
    }

    .after {
        padding-left: 6px;
        line-height: 1.5;
    }
}

:deep(.bindCust) {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ff6b00;
}
</style>
